<template>
  <el-container class="home_container">
    <!-- 头部区域 -->
    <el-header>
      <div>
        <img src="../assets/images/u2.png" alt />
        <span>合肥市公安局侦查指挥作战平台</span>
        <!-- <i>Version 1.0.0</i> -->
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse?'64px':'200px'">
        <!-- 控制折叠区域 -->
        <div class="toggle_button" @click="toggle_bar">|||</div>
        <!-- 侧边栏菜单区域 -->
        <!-- <el-menu :default-active="activePath" :router="true" text-color="#fff" active-text-color="#409eef" background-color="#333744" unique-opened :collapse="isCollapse" :collapse-transition="false"> -->
          <el-menu
          :default-active="activeMenu"
          router
          class="el-menu-demo"
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409eef"
          :collapse="isCollapse" 
          :collapse-transition="false">
          <!-- <el-submenu :index="item.id+''"  v-for="item in menulist" :key="item.id"  @click="saveNetStatus('/'+item.name)">
            <template slot="title">
              <i class="el-icon-chat-line-round"></i>
              <span>{{item.name}}</span>
            </template>
          </el-submenu> -->
          <el-menu-item index="/clues" @click="toclues">
            <i class="el-icon-menu"></i>
            <span slot="title">线索管理</span>
          </el-menu-item>
          <el-menu-item index="/casefile" @click="tocasefile">
            <i class="el-icon-menu"></i>
            <span slot="title">案件档案</span>
          </el-menu-item>
          <el-menu-item index="/">
            <i class="el-icon-document"></i>
            <span slot="title">态势分析</span>
          </el-menu-item>
          <el-menu-item index="/stringcase" @click="tostringcase">
            <i class="el-icon-setting"></i>
            <span slot="title">案件串并</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 内容区域 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse:false,
      // activePath:'',
    //   routes: [
    //  { name: '线索管理', link: 'clues', active: true },
    //  { name: '案件档案', link: 'casefile', active: true },
    //  { name: '态势分析', link: 'homeindex', active: true },
    //  { name: '线索管理', link: 'stringcase', active: true },]

    };
  },

  methods: {
    logout() {
      this.$router.push("/login");
      sessionStorage.removeItem("token");
      this.$mg.success("退出成功");
    },
    //控制侧边栏折叠还是展开
    toggle_bar(){
      this.isCollapse=!this.isCollapse;
    },
    //保存链接的激活状态(保持点击的二级菜单保持高亮)
    saveNetStatus(activePath){
      sessionStorage.setItem('activePath',activePath);
      this.activePath=activePath;
    },
    toclues(){
      this.$router.push('/clues')
    },
    tocasefile(){
      this.$router.push('/casefile')
    },
    tostringcase(){
      this.$router.push('/stringcase')
    },
   
  },

  created() {
    // this.getMenus();
    this.activePath=sessionStorage.getItem('activePath');
  },
  computed: {
  // 我们使用计算属性来获取到当前点击的菜单的路由路径，然后设置default-active中的值
  // 使得菜单在载入时就能对应高亮
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      // 可以在路由配置文件中设置自定义的路由路径到meta.activeMenu属性中，来控制菜单自定义高亮显示
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    }
  }
};
</script>

<style lang='less' scoped>
.home_container {
  height: 100%;
};
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: #fff;
  font-size: 20px;
  div {
    display: flex;
    align-items: center;
    img{
      width: 50px;
      height: 50px;
    }
    span {
      margin-left: 15px;
      font-size: 28px;
      color: #fff;
    }
    i {
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      font-style: normal;
      font-family: "微软雅黑";
      position: relative;
      bottom: -10px;
      margin-left: 15px;
    }
  }
};
.el-aside {
  background-color: #333744;
  .toggle_button{
    background-color: #4a5064;
    color: #fff;
    text-align: center;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 0.2em;
    user-select: none;
    cursor: pointer;
  }
  .el-menu{
    border-right: none;
      .el-menu-item{
      font-size: 18px !important;
      text-align: center;
      }
    
    
    .iconfont{
    margin-right: 15px;
  }

  }
  
};
.el-main {
  background-color: #eaedfa;
  overflow-x: hidden !important;
};
</style>
